<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!--视口设置
			1.物理视口，也就是当width=device-width，就会生效，视口的大小根据屏幕的物理尺寸而定
			代码注释：
			width=device-width   表示  窗口的宽度根据屏幕的物理宽度来定
			initial-scale=1      表示  初始的放大倍数默认为1倍
			minimum-scale=1		表示，最小放大倍数为1
			maximum-scale=1		表示最大放大倍数为1
			user-scalable=no		表示禁止用户缩放本页面
		-->
		<!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->
		
		<!--
			2.布局视口，可以理解为一个模拟大小的窗口，该窗口的大小可以由我们来决定		
		-->
		<meta name="viewport" content="width=640,user-scalable=no">
		
		<!--
	        	3.当视口缺省的时候，默认视口的宽度为980px
        -->
	</head>
	<body>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			.web{
				width: 970px;
				height: 1000px;
				background: skyblue;
				border: 5px solid red;
			}
		</style>
		<div class="web">
			
		</div>
	</body>
</html>
